import React from 'react'
import Index from './layout/Index'

import Login from './views/login/Index'

// HashRouter: Hash 路由模式
// BrowserRouter: History 路由模式
// Routes: 路由出口
// Route: 路由配置规则
import { HashRouter, BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'

import menus from './routers'

export default function App() {

    // 渲染路由出口的函数
    const renderRouter = (menus) => {
        return menus.map(item => {
            if (item.children) {
                // 有子路由
                return renderRouter(item.children)
            } else {
                // console.log(item.key);
                // 没有子路由
                return <Route exact key={item.key} path={item.key} element={item.element} />
            }
        })
    }


    return (
        <>
            {/* V5 路由出口 */}
            {/* exact 路由精确匹配 */}
            {/* <Switch>
                <Route path='/login' exact components={Login} />
            </Switch> */}
            {/* <React.Suspense fallback={<div>加载中...</div>}> */}
            {/* 路由模式 */}
            <HashRouter >

                {/* V6 路由出口 */}
                <Routes>
                    {/* V6 路由规则 */}
                    {/* 路由重定向 */}
                    {/* <Route path='/' element={<Navigate to={'/home'} />} /> */}
                    <Route path='/' element={<Index />}>
                        {/* 配置二级路由 */}
                        {renderRouter(menus)}
                    </Route>
                    {/* exact 当路由只是 /login 的时候才让其进入登录页面 */}
                    <Route path='/login' exact element={<Login />} />
                </Routes>

            </HashRouter>
            {/* </React.Suspense> */}
        </>
    )
}
